<template>
  <div class="drawer" :class="[size]" ref="drawerRef">
    <Transition name="fadeIn">
      <div
        class="mask"
        :class="[placement, is_imed_close ? 'imed_close' : '']"
        @click="close"
        v-show="visible"
      ></div>
    </Transition>
    <Transition :name="contentTransition">
      <div
        v-show="visible"
        class="content-container"
        :class="[
          placement,
          round ? 'round' : '',
          is_imed_close ? 'imed_close' : '',
        ]"
        :style="{ height: showVisibleHeight }"
      >
        <div class="header" v-if="headerVisible">
          <slot name="header">
            <span v-if="titleVisible">{{ title }}</span>
          </slot>
          <div
            class="close-icon"
            :class="[closeIconPosition]"
            @click.stop="close"
          >
            <slot name="closeIcon"
              ><svg
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path d="M5 5L19 19" stroke="black" stroke-width="1.5" />
                <path d="M19 5L5 19" stroke="black" stroke-width="1.5" />
              </svg>
            </slot>
          </div>
        </div>
        <div
          class="content"
          @touchstart="contentTouchStart"
          @touchend="contentTouchEnd"
        >
          <slot></slot>
        </div>
        <div class="footer" :style="{ padding: bottomPadding }">
          <slot name="footer">
            <a-button type="primary" @click="submit" block>{{
              buttonText
            }}</a-button>
          </slot>
        </div>
      </div>
    </Transition>
  </div>
</template>

<script setup lang="ts">
import { nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";

type Props = {
  visible?: boolean;
  title?: string;
  round?: boolean;
  headerVisible?: boolean;
  placement?: "top" | "left" | "right" | "bottom";
  buttonText?: string;
  titleVisible?: boolean;
  closeIconPosition?: "right" | "left";
  bottomPadding?: string;
  closeVisible?: boolean;
  highHeight?: boolean;
  size?: "large" | "small" | "default";
};

const props = withDefaults(defineProps<Props>(), {
  visible: false,
  round: true,
  headerVisible: true,
  titleVisible: true,
  title: "标题",
  placement: "bottom",
  buttonText: "立即提交",
  closeIconPosition: "right",
  highHeight: false,
});

const drawerRef = ref();

const emit = defineEmits(["update:visible", "btn_click", "close"]);

const close = () => {
  is_imed_close.value = false;
  nextTick(() => {
    emit("update:visible", false);
    emit("close", false);
  });
};

const submit = () => {
  emit("btn_click");
};

const showVisibleHeight = ref();

watch(
  () => props.visible,
  (n) => {
    if (n && props.highHeight) {
      changeDrawerVisible();
    }
  }
);

const changeDrawerVisible = () => {
  showVisibleHeight.value = `calc(${window.innerHeight}px - var(--yd-header-height) - 10vh)`;
};

const contentTransition = computed(() => {
  if (props.placement === "bottom") return "slideUp";
  if (props.placement === "top") return "slideDown";
});
const is_imed_close = ref(false);
const imed_close = () => {
  is_imed_close.value = true;
  nextTick(() => {
    emit("update:visible", false);
    emit("close", false);
  });
};
onMounted(() => {
  window.addEventListener("resize", imed_close);
});
onBeforeUnmount(() => {
  window.removeEventListener("resize", imed_close);
});
const bindEvent = () => {
  let containerDom = (drawerRef.value as HTMLElement).querySelector(
    ".content-container"
  );
  containerDom?.addEventListener("touchstart", (e) => {
    e.stopPropagation();
    e.preventDefault();
  });
};
</script>
<style scoped lang="less">
.drawer {
  position: fixed;
  inset: 0;
  z-index: 99;
  pointer-events: none;
  touch-action: none;
  &.large {
    .content-container {
      &.top {
        height: 2222px !important;
      }
    }
  }
  .mask {
    height: 100vh;
    position: absolute;
    width: 100vw;
    background-color: rgba(0, 0, 0, 0.4);
    pointer-events: auto;
    &.top {
      height: calc(100% - var(--yd-header-height));
      bottom: 0;
    }
    &.imed_close {
      animation-duration: 0s;
      transition-duration: 0s;
    }
  }
  .content-container {
    position: absolute;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    pointer-events: auto;
    transition: all 0.3s;
    &.imed_close {
      animation-duration: 0s;
      transition-duration: 0s;
    }
    &.bottom {
      bottom: 0;
      left: 0;
      right: 0;
      height: 2000px;
      &.round {
        border-top-left-radius: 164px;
        border-top-right-radius: 164px;
      }
    }
    &.top {
      top: var(--yd-header-height);
      left: 0;
      right: 0;
      height: 1920px;
      &.round {
        border-bottom-left-radius: 164px;
        border-bottom-right-radius: 164px;
      }
    }
    &.left {
      left: 0;
      top: var(--yd-header-height);
      bottom: 0;
      width: 76vw;
    }
    &.right {
      right: 0;
      top: var(--yd-header-height);
      bottom: 0;
      width: 76vw;
    }
    .close-icon {
      position: absolute;
      top: 82px;
      &.right {
        right: 82px;
      }
      &.left {
        left: 82px;
      }
    }
    .header {
      text-align: center;
      padding: 82px;
      font-size: 92px;
      min-height: 292px;
    }
    .content {
      flex: 1;
      padding: 0 var(--yd-content-gap);
      overflow-y: auto;
    }
    .footer {
      border-top: 3px solid #e6edf2;
      padding: 82px;
      padding-top: 41px;
    }
  }
}
</style>
